<template>
  <div class="login">
      <el-form
        ref="ruleFormRef"
        style="margin-top: 40px;"
        :model="loginInfo"
        status-icon
        label-width="auto"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="loginInfo.username" type="text" clearable />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="loginInfo.password" type="password" clearable />
        </el-form-item>
        <el-form-item>
          <div style="margin: 20px auto;">
            <el-button type="primary" @click="searchForm()">查询</el-button>
            <el-button type="primary" @click="searchAllForm()">查询所有</el-button>
            <el-button type="primary" @click="submitForm()">登录</el-button>
            <el-button type="primary" @click="updateForm()">更新</el-button>
            <el-button type="primary" @click="submitdels()">删除</el-button>
            <router-link to="/home" style="margin-left: 10px">
              <el-button>注册</el-button>
            </router-link>
          </div>
        </el-form-item>
      </el-form>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from "vue";
import { ElMessage, ElForm } from 'element-plus';
import axios from '../../utils/axios';

export default defineComponent({
  setup() {
    const loginInfo = reactive({
      username: '',
      password: ''
    })
    const ruleFormRef = ref<InstanceType<typeof ElForm> | null>(null);
    const searchForm = () => {
      const params = {
        id: '70fe3cf1-1d6a-4616-aa14-0925d5e2ba5b'
      };
      axios.get('http://localhost:3000/users/profile', { params }).then(res => {
        console.log(res)
      })
    }
    const searchAllForm = () => {
      const params = {
        page: 1,
        limit: 5,
      };
      axios.get('http://localhost:3000/users', { params }).then(res => {
        console.log(res)
      })
    }
    const submitForm = () => {
      if (!loginInfo.username) {
        ElMessage({
          showClose: true,
          message: '请输入用户名!',
          type: 'success'
        })
        return
      }
      if (!loginInfo.password) {
        ElMessage({
          showClose: true,
          message: '请输入密码!',
          type: 'success'
        })
        return
      }
      axios.post('http://localhost:3000/users', { password: loginInfo.password, username: loginInfo.username }).then(res => {
        if (!ruleFormRef.value) return
        ruleFormRef.value.resetFields()
      })
    }
    const updateForm = () => {
      axios.patch('http://localhost:3000/users/22c14d4d-0401-47da-aed4-7513f199b53c', { password: 999999, username: '达瓦' }).then(res => {
        console.log(res)
      })
    }
    const submitdels = () => {
      axios.delete('http://localhost:3000/users/22c14d4d-0401-47da-aed4-7513f199b53c').then(res => {
        console.log(res)
      })
    }
    return { loginInfo, searchAllForm, searchForm, submitForm, updateForm, ruleFormRef, submitdels };
  }
})
</script>
<style lang="scss" scoped>
.login{
  width: 350px;
  height: 240px;
  padding: 30px 20px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  border: 1px solid #cccccc;
}
</style>
<style lang="scss">
#app {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>
